<template>
     <view class="activity">
        <view class="title"><view class="left"></view> 邀请记录 <view class="right"></view> </view>
            <view :class="['concern',{'on': !videoLookMore}]">
                <view v-for="item in list" :key="item.id" class="list" >
                    <view class="info" >
                        <cdn-img :src="item.user.mini_avatar"  class="pic" mode="aspectFill"/> 
                        <view class="center">
                            <view class="h3 ells name">{{ item.user.mini_nickname }}</view>
                            <view class="h3 home">{{item.created_at}}</view>
                        </view>
                    </view>
                    <!-- <view class="y_label" >{{is_authorization[item.is_authorization] }}</view> -->
                    <view class="y_label" v-if="item.is_authorization===1 && item.is_star===1">已认证</view>
                    <view class="y_label" v-else>未认证</view>
                </view>
            </view>
            <!-- {{ list.length }} -->
            <view class="viewAll" @click="viewHandle" v-if="list.length>5&&!videoLookMore">
                <text>展开全部</text>
                <nut-icon name="rect-down" color="#666" class="rightBtn"></nut-icon>
            </view>
            <view v-if="list.length<=0" class="none">暂无记录</view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { useDidShow, useLoad } from '@tarojs/taro'
import { getRecord } from '@/api/index'

const videoLookMore =ref(false)
const list = ref([]) 
const is_authorization = { 1:'已认证' ,0:'未认证'}
function viewHandle(){
    videoLookMore.value = true
//   this.videoLookMore = !this.videoLookMore;
}
let paging = { page: 1, size: 20 }
useDidShow(() =>{
    getRecord(paging).then(res=>{
        list.value = res.data
    })

})
useLoad((option)=>{
})
</script>
<style lang="scss">
    .activity{
        width: 355px;
		background: #ffffff;
		border-radius: 10px;
		margin: 20px auto 0;
        color: #333333;
        .title{
            text-align: center;
            padding: 18px 0;
            font-size: 18px;
            font-weight: 700;
            .left{
                width: 16px;
                height: 3px;
                background-image: linear-gradient(-90deg,#3a5ef4 0%, rgba(58,94,244,0.00) 100%);
                border-radius: 1.5px;
                margin: 5px 0;
                display: inline-block;
            }
            .right{
                width: 16px;
                height: 3px;
                background-image: linear-gradient(#3a5ef4 0%, rgba(58,94,244,0.00) 100%);
                border-radius: 1.5px;
                margin: 5px 0;
                display: inline-block;
            }
        }
    .concern{
    padding-left: 12px;
    padding-right: 12px;
    display: block;
    text-overflow: clip;
    overflow: visible;
    padding-bottom: 18px;
.center{
    .name{
        color: #333333;
        font-size: 13px;
        font-weight: bold;
    }
    .home{
        margin-top: 8px;
        color: #999999;
        font-size:12px ;
        font-weight: 400;
    }
}
.top{
    font-size: 12px;
    color: #333333;
}
.pic{
    width: 35px;
    height: 35px;
    margin-right: 10px;
    border-radius: 50%;
}
.list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0;    
    .info{
        display: flex;
    }
}
.y_label{
    font-size: 12px;
    font-weight: 400;
    color: #333333;
}


    }
    .viewAll{
            font-size: 13px;
            color: #666666;
            display: flex;     
            justify-content: center;
            align-items: center;
            padding: 14px 0 13px;
        }
    .on {
        // height: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-overflow: -o-ellipsis-lastline;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .none{
        color: #999999;
        display: flex;
        justify-content: center;
        padding-bottom: 18px;
        font-size: 15px;
    }
}

</style>